<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import uploadImage from '@/components/uploadImage/index.vue'
  import { teamOrderInfo } from '@/api/training'
  import { SIGN_ENUM, SIGN_ENUM_TEXT } from '../../utils/basicData'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  const teamOrderId = ref(0)
  const orderInfo = ref({})
  const totalPrice = ref(0)
  const selectList = ref([])
  const formData = ref({
    ids: [],
    paymentMethod: 1
  })
  onLoad((options:any) => {
    teamOrderId.value = options.id
    getTeamInfo()
  })
  const getTeamInfo = () => {
    teamOrderInfo({campId:teamOrderId.value}).then(res => {
      const data = JSON.parse(JSON.stringify(res.data))
      data.eventsInfo.map((item:any) => {
        item.collapse = false
        item.active = false
        item.persons.map((ite:any) => {
          ite.check = false
          ite.disabled = !ite.canPay
          return ite
        })
        return item
      })
      if(res.code == 200){
        orderInfo.value = data
      }
    }).catch(err=>{
      orderInfo.value = {}
    })
  }
  const collapseClick = (data:any) => {
    data.collapse = !data.collapse
  }
  const butExchangePayment = (type:any) => {
    formData.value.paymentMethod = type
    if(type == 2){

    }
  }
  // 选择全部
  const choiceOverClick = (data:any) => {
    data.check = !data.check
    data.persons.map((item:any) => {
      if(!item.disabled){
        item.check = data.check
      }
    })
  }
  // 单个选着
  const choiceClick = (data:any,index:number) => {
    if(!data.disabled){
      data.check = !data.check
    }
    let ifOver = true
    orderInfo.value.eventsInfo[index].persons.map((item:any) => {
      if(!item.disabled && !item.check){
        ifOver = false
      }
    })
    orderInfo.value.eventsInfo[index].check = ifOver
  }

  // 遍历获取选取列表
  const choiceList = () => {
    selectList.value = []
    totalPrice.value = 0
    orderInfo.value.eventsInfo.map((item:any) => {
      item.persons.map((items:any) => {
        if(items.check && !items.disabled){
          selectList.value.push(items)
          totalPrice.value += +items.totalAmount
        }
      })
    })
  }
</script>

<template>
  <view class="order-body">
    <xx-title title="团队报名"/>
    <view class="order-item">
      <view class="order-header">
        <view class="order-name">订单信息</view>
      </view>
      <view class="order-info">
        <view class="order-info-item">
          <view class="label">机构名称</view>
          <view class="value">{{orderInfo.companyName}}</view>
        </view>
        <view class="order-info-item">
          <view class="label">联系电话</view>
          <view class="value">{{orderInfo.contactPhoneNumberMask}}</view>
        </view>
        <view class="order-info-item">
          <view class="label">应报名人数</view>
          <view class="value">{{orderInfo.totalPersonCount}}人</view>
        </view>
<!--        <view class="order-info-item">-->
<!--          <view class="label">训练营时间</view>-->
<!--          <view class="value">{{orderInfo.contactPhoneNumber}}</view>-->
<!--        </view>-->
      </view>
    </view>
    <block v-if="orderInfo.eventsInfo?.length > 0">
      <view class="order-item" style="padding: 20rpx 32rpx" v-for="(item,index) in orderInfo.eventsInfo" :key="item.id">
        <view class="order-header" @click="collapseClick(item)" :style="{borderBottom:!item.collapse ? 'none' :'1rpx solid #F5F5F5',paddingBottom:!item.collapse ? '0' :'14rpx'}">
          <view class="order-name">
            <view class="order-checkout" @click.stop="choiceOverClick(item)" :class="{active: item.check,disabled:item.disabled}">
              <up-icon name="checkbox-mark" v-if="item.check" color="#ffffff" size="13"></up-icon>
            </view>
            <view class="title">{{item.eventsName}}</view>
          </view>
          <view class="collapse-icon" :class="{collapse:item.collapse}">
            <up-icon name="arrow-left" size="14"></up-icon>
          </view>
        </view>
        <view class="order-info" v-if="item.collapse">
          <view class='order-persons-item' v-for='(items,indx) in item.persons' :key='indx'>
            <view class="order-list-left">
              <view class="order-checkout"  @click="choiceClick(items,index)" :class="{active: items.check,disabled:items.disabled}">
                <up-icon name="checkbox-mark" v-if="items.check" color="#ffffff" size="13"></up-icon>
              </view>
              <view class='name'>
                {{items.name}}  {{items.idCardMask}}
              </view>
            </view>
            <view class='status' v-if="items.canPay" :class="SIGN_ENUM_TEXT[items.registrationOrderStatusEnum]">
              {{ SIGN_ENUM[items.registrationOrderStatusEnum] }}
            </view>
            <view class='status' v-if="items.canRefunds">
              申请退款
            </view>
          </view>
        </view>
      </view>
    </block>
    <view class="order-item">
      <view class="order-header">
        <view class="order-name">支付方式</view>
      </view>
      <view class="order-info">
        <view class="method-item" @click="butExchangePayment(1)">
          <view class="method-item-left">
            <view class="image">
              <image :src="`${$Prefix}/public/images/smallImage/weichart-icon.png`"></image>
            </view>
            微信支付
          </view>
          <view class="btn" :class="{check:formData.paymentMethod == 1}">
            <up-icon v-if="formData.paymentMethod == 1" name="checkmark-circle-fill" color="#F36E13" size="20"></up-icon>
          </view>
        </view>
        <view class="method-item" @click="butExchangePayment(2)">
          <view class="method-item-left">
            <view class="image">
              <image :src="`${$Prefix}/public/images/smallImage/corporate.png`"></image>
            </view>
            对公转账
          </view>
          <view class="btn" :class="{check:formData.paymentMethod == 2}">
            <up-icon  v-if="formData.paymentMethod == 2" name="checkmark-circle-fill" color="#F36E13" size="20"></up-icon>
          </view>
        </view>

        <upload-image :max-count="1" v-if="formData.paymentMethod == 2">
          <image mode="widthFix" :src="`${$Prefix}/public/images/smallImage/uploadImg.png`"></image>
        </upload-image>
      </view>
    </view>
    <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="seizeASeat"></view>
    </view>
    <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <text class="money">￥{{totalPrice == 0 ? 0 : totalPrice * 0.01}}</text>
      <view class="group-registration">立即支付</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  ::v-deep.u-collapse{
    width: 100%;
  }
  ::v-deep.u-cell__body{
    padding: 24rpx 0 !important;
  }
  ::v-deep.u-collapse-item__content__text{
    padding: 24rpx;
  }
  .collapse-icon{
    transition: all .3s;
    &.collapse{
      transform: rotate(-90deg);
    }
  }
  .order-body {
    width: 100%;
    box-sizing: border-box;
    background-color: #F5F5F5;
    min-height: 100vh;
    padding: 1rpx;
    .order-item {
      margin:32rpx 28rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 32rpx;
      .order-title {
        font-size: 24rpx;
        color: #818496;
      }
      .order-status {
        margin-top: 5rpx;
        font-size: 36rpx;
        font-weight: 500;
      }
      .order-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 14rpx;
        border-bottom: 1rpx solid #EBEBEB;
        .order-name{
          font-size: 32rpx;
          color: #21252E;
          display: flex;
          align-items: center;
        }
      }
      .order-info {
        padding-top: 20rpx;
        .order-info-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8rpx 0;
          font-size: 28rpx;
          .label{
            color: #505363;
          }
          .value{
            color: #505363;
          }
        }
        .order-persons-item{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 0;
          border-bottom: 1rpx solid #EBEBEB;
          &:last-child{
            padding-bottom: 0;
            border-bottom: none;
          }
          .order-list-left{
            display: flex;
            align-items: center;
            .name{
              font-weight: 500;
              font-size: 28rpx;
              color: #21252E;
            }
          }
          .status{
            margin-top: 8rpx;
            font-size: 24rpx;
            font-weight: normal;
            color: #505363;
          }
        }
        .method-item{
          font-size: 28rpx;
          font-weight: normal;
          color: #21252E;
          display: flex;
          margin-bottom: 20rpx;
          justify-content: space-between;
          align-items: center;
          &:last-child{
            margin-bottom: 0;
          }
          .method-item-left{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .image{
              margin-right: 8rpx;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              background-color: #F5F5F5;
              image{
                width: 100%;
                height: 100%;
              }
            }
          }
          .btn{
            width: 20px;
            height: 20px;
            border-radius: 100rpx;
            background-color: #F5F5F5;
            border: 1rpx solid #999999;
            display: flex;
            justify-content: center;
            align-items: center;
            &.check{
              background-color: transparent;
              border: none;
            }
          }
        }
      }
      .order-info-item-center{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #999999;
        margin-top:10rpx;
      }
    }
  }
  .bottom-fixed{
    padding-top: 14px;
    background-color: #F5F5F5;
    .seizeASeat{
      height: 60rpx;
    }
  }
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    padding-top: 14rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .money{
      width: 20%;
      font-weight: 500;
      color: #F36E13;
    }
    .group-registration{
      width: 80%;
      padding: 16rpx 0;
      margin: 0 20rpx;
      text-align: center;
      border-radius: 16rpx;
      box-sizing: border-box;
      background: #92C75B;
      color: #FFFFFF;
      font-weight: 500;
      letter-spacing: 2rpx;
    }
  }
  .order-checkout{
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 1rpx solid #999999;
    border-radius: 5rpx;
    margin-right: 10rpx;
    &.active{
      background-color: #F36E13;
      border: 1rpx solid #F36E13;
    }
    &.disabled{
      background-color: #e0e0e0;
      border: 1rpx solid #e0e0e0;
    }
  }
</style>
